<template>
  <div class="bg">
    <div class="black" v-if="NoIn">
      <el-button
        type="primary"
        @click="changeLogin"
        style="position: absolute; top: 0; left: 0; opacity: 0"
        >恭喜你!点击进入</el-button
      >
      <div class="tip">
        <div>
          <h1>你没有资格进入!!!</h1>
          <el-button type="danger" @click="GoBaiDu">退出</el-button>
        </div>
      </div>
    </div>
    <div class="container" v-if="!NoIn">
    <div class="Avatar">
      <img src="../assets/img/wangcheng1.jpg" alt="" srcset="">
    </div>
      <div>
        <el-form
          :model="ruleForm"
          status-icon
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名" prop="pass">
            <el-input
              v-model="ruleForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :loading="ifLoading" @click="submitForm('ruleForm')"
              :disabled="ruleForm.password===''||ruleForm.username===''">提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
          <p class="error" v-if="error"><span>用户名或密码错误</span></p>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import jwt from "jwt-decode"
interface Form{
  username:string,
  password:string
}
@Component
export default class login extends Vue {
  private NoIn: Boolean = true;
  private error:boolean = false;
  private ruleForm:Form={
    username:"",
    password:""
  };
  private ifLoading:Boolean = false;
  GoBaiDu(): void {
    window.location.href = "http://www.baidu.com";
  }
  changeLogin(): void {
    this.NoIn = false
  }
  submitForm(): void{
    this.ifLoading = true;
    (this as any).$axios.post("/user/login",{
      username:this.ruleForm.username,
      password:this.ruleForm.password
    }).then((res:any)=>{
      console.log(res)
      if(res.data.error===-1){
        const userInfo = jwt(res.data.data.token)
        console.log(userInfo)
        if(userInfo.status!=="876ea4f21078c7d38e3b0bdc74a"){
          this.changeLogin()
        }else{
          this.$store.commit("user/changeUserInfo",userInfo)
          this.$store.commit("user/changeLoginStatus",true)
          localStorage.setItem("Token",JSON.stringify(res.data.data.token))
          this.$router.push("/index")
        }
      }else{
        this.error = true
      }
    }).finally(()=>{
    this.ifLoading = false;

    })
  }
  resetForm(): void{
    this.ruleForm.username = ""
    this.ruleForm.password = ""
  }
}
</script>

<style lang="less" scoped>
@import url("@/assets/css/less.less");
.bg {
  height: 100%;
  min-width: 1200px;
  background-color:#FCC268;
  .center;
  .black {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 1);
    .center;

    .tip {
      width: 30%;
      height: 200px;
      background-color: #fff;
      box-shadow: 0 0 15px rgb(0, 0, 0);
      text-align: center;
      h1 {
        color: red;
        font-weight: 200;
        margin-top: 45px;
      }
      button {
        margin-top: 15px;
      }
    }
  }
  .container{
    width: 35%;
    height: 300px;
    background-color: #fff;
    padding: 75px 55px 55px 0;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    .error{
      margin-left: 100px;
    text-align: left;
      color: red;
      font-size: 15px;
    }
    .Avatar{
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
      margin: auto;
      top: -95px;
      left: 0;
      right: 0;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
      img{
        width: 150px;
        height: 150px;
        border-radius: 50%;
      }
    }
  }
}
</style>